<template>
  <a-input
    :placeholder="changePlaceholder(attrObj.isDisabled, PLACEHOLDER_INPUT)"
    :maxLength="attrObj.maxLength"
    :disabled="attrObj.isDisabled"
    v-model.trim="attrObj.formModel[attrObj.formProps]"
    @input="onInput"
    @compositionstart="onCompositionStart"
    @compositionend="onCompositionEnd"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
import { PLACEHOLDER_INPUT } from "@/config/const";
import { changePlaceholder } from "@/utils/util";
export default {
  name: "CompositionInput",
  data() {
    return {
      changePlaceholder,
      PLACEHOLDER_INPUT,
      lock: false
    };
  },
  props: {
    attrObj: {
      type: Object,
      default() {
        return {
          formProps: "",
          formModel: {},
          maxLength: 30,
          isDisabled: false
        };
      }
    }
  },
  methods: {
    onInput(e) {
      // 正常输入 中文不触发
      if (!this.lock) {
        this.attrObj.formModel[this.attrObj.formProps] = e.target.value
          .replace(/[^\w]/gi, "")
          .toUpperCase();
      }
    },
    onCompositionStart() {
      this.lock = true;
    },
    onCompositionEnd(e) {
      // 输入中文触发
      this.lock = false; // 在调用
      this.onInput(e);
    }
  }
};
</script>

<style lang="less" scoped></style>
